<template>
  <view class="content">
      <u-tabs
        :list="list"
        :is-scroll="false"
        :current="current"
        @change="change"
        bg-color="#F5F5F5"
        active-color="#F4333C"
        inactive-color="#5E5E5E"
        font-size="30rpx"
        :bold="false"
      >
      </u-tabs
    >
    <view class="main">
      <view class="allActive" v-if="current == 0">
        <view
          v-for="(item, index) in activeList"
          :key="index"
          class="activeItem"
          @click="gotoinfo"
        >
          <view class="status" :class="{ active: item.status == 1 }">{{
            item.status == 1 ? "活动进行中" : "活动已结束"
          }}</view>
          <view class="active-main">
            <view class="title">{{ item.title }}</view>
            <view class="time">
              <image class="timeImg" src="@/static/active/time.png"></image>
              {{ item.time }}</view
            ></view
          >
        </view>
      </view>
      <view class="joinActive" v-if="current == 1">
        <view
          v-for="(item, index) in activeList"
          :key="index"
          class="activeItem"
          @click="gotoinfo"
        >
          <view class="status" :class="{ active: item.status == 1 }">{{
            item.status == 1 ? "活动进行中" : "活动已结束"
          }}</view>
          <view class="active-main">
            <view class="title">{{ item.title }}</view>
            <view class="time">
              <image class="timeImg" src="@/static/active/time.png"></image>
              {{ item.time }}</view
            ></view
          >
        </view></view
      >
    </view></view
  >
</template>

<script>
export default {
  data() {
    return {
      current: 0,
      list: [
        {
          name: "全部",
        },
        {
          name: "我参加的",
        },
      ],
      activeList: [
        {
          title: "参加海豚瑜伽挑战赛，唤醒本色，本就出色!",
          status: 1,
          time: "2022-09-12  12:00~2022-09-18  12:00",
        },
        {
          title: "参加海豚瑜伽挑战赛，唤醒本色，本就出色!",
          status: 1,
          time: "2022-09-12  12:00~2022-09-18  12:00",
        },
        {
          title: "参加海豚瑜伽挑战赛，唤醒本色，本就出色!",
          status: 2,
          time: "2022-09-12  12:00~2022-09-18  12:00",
        },
      ],
    };
  },
  methods: {
    // tab 切换
    change(index) {
      console.log(index);
      this.current = index;
    },
    gotoinfo() {
      console.log(123);
      uni.navigateTo({
        url: "/pages/community/active/activeInfo",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/.u-tabs{
  background-color: #fff !important;
}
.content {
  margin-top: 20rpx;
  .main {
    background-color: #fff;
    width: 90%;
    margin: 0 auto;
    margin-top: 20rpx;
    padding: 0 20rpx;
    border-radius: 16rpx;
    .allActive,
    .joinActive {
      .activeItem {
        padding-top: 40rpx;
        position: relative;
        border-bottom: 2rpx solid #eee;
        padding-bottom: 20rpx !important;
        .status {
          position: absolute;
          width: 200rpx;
          right: 0;
          top: 30rpx;
          padding: 10rpx 20rpx;
          border-radius: 10rpx 0 0 10rpx;
          background-color: #dcf8ee;
          color: #34b572;
        }
        .active {
          background-color: #d0d0d0;
          color: #fff;
        }
        .active-main {
          margin-top: 50rpx;
          .title {
            margin-top: 26rpx;
            font-size: 28rpx;
            font-weight: bold;
          }
          .time {
            margin-top: 26rpx;
            .timeImg {
              width: 28rpx;
              height: 28rpx;
              margin-right: 10rpx;
            }
          }
        }
      }
    }
  }
}
</style>
